import Vue from 'vue'
import Vuex from 'vuex'
import 'element-ui/lib/theme-chalk/index.css';//引入element-ui样式文件
import {Message} from 'element-ui'//引入element-ui的message
import {getPlaylistDetails, getSongDetail, getSongUrl} from "@/network/play/plater";

Vue.use(Vuex)

const carousel = {//Vuex用户信息
    namespaced: true,
    state: {
        userDetails: {},//用户信息
        userId: '',//用户id
    },
    mutations: {},
    actions: {},
    modules: {}
}
const player = {//播放列表
    namespaced: true,
    state: {
        playlist: [],
    },
    mutations: {
        ADDSONGMESSAGE: function (state, value) {
            value.forEach(item => {//遍历获得的playListItemsArr
                state.playlist.push(item)//将里面的元素依次添加到vuex到播放列表中
            })
        },
        DELETEONESONGMESSAGE: function (state, value) {
            state.playlist.forEach((item, index) => {
                if (item.id===value.id){
                    state.playlist.splice(index,1)
                    return Message.success('删除成功了哦!')
                }
            })
        }
    },
    actions: {
        addSongMessage: async function (context, value) {
            const {data: detailList} = await getSongDetail(value.id)
            console.log(detailList)
            console.log(value.type)
            console.log(value)
            if (value.type === 4) {
                console.log('这是一首歌曲')
                let playListItemsArr = []
                const {data: res} = await getSongUrl(value.id)//请求url
                // const {data: detailList} = await getSongDetail(value.id)
                let Single = {}//创建储存歌曲信息的对象容器
                Single.id = value.id
                Single.name = value.name
                Single.theUrl = res.data[0].url
                Single.picUrl = value.picUrl
                Single.artists = value.song.artists
                Single.theArtists = value.song.artists.map(element => {
                    return element.name
                }).join(' ')
                // Single.theArtistsName =
                playListItemsArr.push(Single)//将写好的歌曲信息放入到歌曲总数组中
                context.commit('ADDSONGMESSAGE', playListItemsArr)//交给mutations
            }
            if (value.type === 0) {
                console.log('这是一个歌单')
                let playListItemsArr = []
                const {data: res} = await getPlaylistDetails(value.id)//根据歌单id获取歌单详情
                let playIDListItem = res.playlist.trackIds.map(item => {
                    return item.id
                }).join(',')//将歌单中的每个歌曲id形成的数组转换成可以发起请求的格式
                const {data: detailList} = await getSongDetail(playIDListItem)//根据歌单中每个歌曲的id获取每个歌曲的详细信息
                const {data: theUrls} = await getSongUrl(playIDListItem)//根据歌单中每个歌曲的id获取每个歌曲的url
                let songList = detailList.songs//接收一下由歌单中歌曲详细信息组成的数组
                for (let i = 0; i < songList.length; i++) {//遍历这个数组
                    let Single = {}//创建暂时储存歌曲信息的容器
                    Single.name = songList[i].name
                    Single.id = songList[i].id
                    Single.picUrl = songList[i].al.picUrl
                    Single.artists = songList[i].ar
                    Single.theArtists = songList[i].ar.map(element => {
                        return element.name
                    }).join(' ')
                    theUrls.data.forEach(item => {//由于批量请求得到的url顺序混乱，只能进行重新的id和url的匹配
                        if (songList[i].id === item.id) {
                            Single.theUrl = item.url
                        }
                    })
                    playListItemsArr.push(Single)//依次将储存有单个歌曲信息的容器放入playListItemsArr
                }
                context.commit('ADDSONGMESSAGE', playListItemsArr)//交给mutations
            }
        },
        deleteOneSongMessage: function (context, value) {
            console.log('删除成功了哦!')
            console.log(value)
            context.commit('DELETEONESONGMESSAGE', value)
        }
    },
    modules: {}
}

export default new Vuex.Store({
    modules: {
        carousel: carousel,
        player: player,
    }
})
